<template>
  <div id="largeScreen" class="largeScreen" :class="fullShow?'full-screen':'no-full-screen'">
    <div :class="fullShow?'action-full':'action'" @click="showFull">
      <img v-if="fullShow" src="@/assets/tc.png">
      <img v-else src="@/assets/qp.png">
      <span class="yellow">{{ fullShow? '退出全屏':'全屏' }}</span>
    </div>
    <!--全屏-->
    <div>
      <div class="aaa">
        <div class="flex-line center pt-20">
          <div class="flex-1 line-box" />
          <el-select v-model="deviceId" placeholder="请选择" :popper-append-to-body="false" @change="change2">
            <el-option v-for="item in devices" :key="item.id+''" :label="item.name" :value="item.id+''" />
          </el-select>
          <div class="flex-1 line-box" />
        </div>
        <weather-report class=" pt-30" :device-id="deviceId" />
        <!--选择-->
        <div class="flex-line center pt-20">
          <div class="flex-1 line-box" />
          <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false" @change="change">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <div class="flex-1 line-box" />
        </div>
        <!--/选择-->
        <!--学生-->
        <el-row :gutter="20" class="pt-30">
          <el-col :span="6">
            <div class="student-item" style="padding-top: 72px">
              <div class="gradientBtn tag ">本月寿星</div>
              <div class="student-box pt-30 " :style="{height:heigtBox+'px'}">
                <div class="flex-line wrap">
                  <div v-for="(item, index) in student.birthdays" :key="index" class="flex-50 text-center" style="margin-bottom: 32px">
                    <a-image :url="item.imgUrl" :default-image="item.gender === 0 ?'nv(1)':'nan(1)'" width="100px" height="100px" round />
                    <p class="text-center">{{ item.name }}</p>
                  </div>
                </div>
              </div>

            </div>
          </el-col>
          <el-col :span="12">
            <div class="student-item" style="padding-top: 72px">
              <div class="gradientBtn tag ">在校学生</div>
              <div class="student-box pt-30 " :style="{height:heigtBox+'px'}">
                <div class="flex-line wrap">
                  <div v-for="(item, index) in student.inAreas" :key="index" class="flex-25 text-center">
                    <a-image :url="item.imgUrl" :default-image="item.gender === 0 ?'nv(1)':'nan(1)'" width="100px" height="100px" round />
                    <p class="text-center">{{ item.name }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="student-item" style="padding-top: 72px">
              <div class="gradientBtn tag ">缺勤学生</div>
              <div class="student-box pt-30 " :style="{height:heigtBox+'px'}">
                <div class="flex-line wrap ">
                  <div v-for="(item, index) in student.absense" :key="index" class="flex-50 text-center">
                    <a-image :url="item.imgUrl" :default-image="item.gender === 0 ?'nv(1)':'nan(1)'" width="100px" height="100px" round />
                    <p class="text-center">{{ item.name }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--/学生-->
      </div>
    </div>
    <!--全屏-->
    <!-- <weather-report /> -->
    <!--选择-->
    <!-- <div class="flex-line center pt-20">
      <div class="flex-1 line-box" />
      <el-select v-model="value" placeholder="请选择" class="mlr-20" @change="change">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <div class="flex-1 line-box" />
    </div> -->
    <!--/选择-->
    <!--学生-->
    <!-- <el-row :gutter="20" class="pt-30">
      <el-col :span="6">
        <div class="student-item">
          <div class="gradientBtn tag ">本月寿星</div>
          <div class="pt-30 flex-line wrap">
            <div v-for="(item,index) in student.birthdays" :key="index" class="flex-50 text-center">
              <a-image :url="item.imgUrl" :default-image="item.gender === 0 ?'nv(1)':'nan(1)'" width="100px" height="100px" round />
              <p class="text-center">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="student-item">
          <div class="gradientBtn tag ">在校学生</div>
          <div class="pt-30 flex-line wrap">
            <div v-for="(item,index) in student.inAreas" :key="index" class="flex-25 text-center">
              <a-image :url="item.imgUrl" :default-image="item.gender === 0 ?'nv(1)':'nan(1)'" width="100px" height="100px" round />
              <p class="text-center">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="student-item">
          <div class="gradientBtn tag ">缺勤学生</div>
          <div class="pt-30 flex-line wrap">
            <div v-for="(item,index) in student.absense" :key="index" class="flex-50 text-center">
              <a-image :url="item.imgUrl" :default-image="item.gender === 0 ?'nv(1)':'nan(1)'" width="100px" height="100px" round />
              <p class="text-center">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row> -->
    <!--/学生-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import WeatherReport from '@/components/Business/WeatherReport'
import AImage from '@/components/Basic/Image'
import { dashboard1 } from '@/api/dashboard'
import { getClassesByArea } from '@/api/common'
export default {
  components: {
    AImage,
    WeatherReport
  },
  data () {
    return {
      devices: [{
        id: '1',
        name: '广西1楼萌果'
      }, {
        id: '2',
        name: '广西1楼荫叶'
      }, {
        id: '3',
        name: '广西1楼大厅'
      }, {
        id: '4',
        name: '广西1楼走廊'
      }, {
        id: '5',
        name: '广西1楼萌芽儿'
      }, {
        id: '6',
        name: '广西1楼萌芽宝'
      }, {
        id: '7',
        name: '广西4楼木工坊'
      }, {
        id: '8',
        name: '广西4楼科学室'
      }],
      deviceId: '1',
      options: [],
      index: 0,
      value: '0',
      student: {
        birthdays: [],
        absense: [],
        inAreas: []
      },
      heigtBox: 200,
      fullShow: false
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  mounted () {
    // let windowHeight = document.documentElement.clientHeight
    const windowHeight = window.screen.height
    console.log('windowHeight')
    console.log(windowHeight)
    this.heigtBox = windowHeight - 56 - 180 - 30 - 60 - 280
    console.log(this.heigtBox)
  },
  created () {
    this.getClasses()
    this.getData()

    // const timer = setInterval(() => {
    //   this.switchClasses()
    // }, 1000 * 60)
    // this.$on('hook:beforeDestroy', function () {
    //   clearInterval(timer)
    // })
  },
  methods: {
    switchClasses () {
      let index = this.index + 1
      if (index === this.options.length) {
        index = 0
      }

      this.value = this.options[index].id
      this.index = index
      this.change(this.value)
    },

    getData (params = {}) {
      dashboard1(params).then(res => {
        this.student = res
      })
    },

    getClasses () {
      const { curArea } = this
      getClassesByArea({ areaId: curArea.areaId, category: 1 }).then(res => {
        console.log(res)
        this.options = res
        this.options.splice(0, 0, { id: '0', name: '全园' })
      })
    },
    change2 (res) {
      this.deviceId = res + ''
    },
    change (res) {
      console.log(res)
      const params = {
        classesId: res
      }
      this.getData(res !== '0' ? params : null)
    },
    showFull () {
      const full = document.getElementById('largeScreen')
      if (this.fullShow) {
        this.fullShow = false
        this.exitFullscreen()
      } else {
        this.fullShow = true
        this.launchIntoFullscreen(full)
      }
    },

    delFull () {
      this.exitFullscreen()
    },

    launchIntoFullscreen (element) {
      console.log(element)
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else {
        console.log('1')
      }
    },

    exitFullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.full-screen {
  padding: 128px 50px;
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("~@/assets/bj.png");
  z-index: 2000;
  top: 0;
  left: 0;
  .student-item {
    // opacity: 0.1;
    background: rgba($color: #38BCF2, $alpha: 0.1);
    p {
      color: #fff;
    }
  }
  .line-box {
    width: 1544px;
    height: 0px;
    border-radius: 0px 0px 0px 0px;
    border: 1px dotted #9EC1EA;
  }
  ::v-deep {
    .mlr-20 {
    }
    .el-select-dropdown__list {
      background: rgba($color: #38BCF2, $alpha: 0.5);
      // background: linear-gradient(0deg, #010822, #0f165d);
    }
    .el-select-dropdown__item {
      // color: #fff;
    }

    .el-input__inner {
      background: rgba($color: #38BCF2, $alpha: 0.1);
      color: #fff;
    }
    .panel.panel1,
    .panel.panel2,
    .panel.panel3,
    .panel.panel4,
    .panel.panel5 {
      background-color: rgba($color:#38BCF2, $alpha: 0.1);
      span {
        color: #fff;
      }
    }
  }
}
.no-full-screen {
  background: #ffffff;
  .student-item {
    background: #fafafa;
    p {
      color: #333;
    }
  }
  .line-box {
    background: #e8e8e8;
  }
}

.largeScreen {
  position: relative;

  .action {
    z-index: 999;
    position: absolute;
    top: -53px;
    right: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 10px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    align-items: center;
    img{
      margin-right: 12px;
    }
  }
  .action-full{
    z-index: 999;
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 10px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    align-items: center;
    span{
      color: #35B4E6 !important;
    }
    img{
      margin-right: 12px;
    }
  }

  .base-info {
    .item {
      background-color: #fafafa;
      border-radius: 8px !important;
      color: #6e645a;
      position: relative;
      padding: 20px 0 30px 20px;
      background-image: url("../../../../assets/operative/line.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: bottom;
      .icon {
        position: absolute;
        right: 10px;
        top: 10px;
      }
      h4 {
        font-size: 30px;
        margin: 0;
        color: #6e645a;
        font-weight: bold;
      }
      p {
        padding-top: 5px;
      }
    }
  }
  ::v-deep {
    .el-input--medium .el-input__inner {
      border-radius: 8px !important;
    }
  }
  .line-box {
    height: 1px;
  }
  .student-item {
    position: relative;
    border-radius: 8px !important;
    padding-bottom: 30px;
    p {
      font-size: 16px;
    }
  }
  .tag {
    position: absolute;
    z-index: 8;
    top: 0px;
    left: 0px;
    display: inline-block;

    text-align: center;
    line-height: 40px;
    width: 120px;
    height: 40px;
    background: linear-gradient( 90deg, #FF8B00 0%, #FFB21A 100%);
    border-radius: 8px 0px 20px 0px;

    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
  }
  .student-box {
    overflow: auto;
    // overflow-y: scroll;
  }
}
.aaa{
  ::v-deep{
    .el-col{
      padding-left: 0 !important;
      padding-right: 24px !important;
    }
    .el-col{
      padding-left: 0 !important;
      padding-right: 24px !important;
    }
    .el-col:last-child{
      padding-left: 0 !important;
      padding-right: 0px !important;
    }
  }
}
</style>
